//注意：：：：：要开 F:\classwork React\react全家桶资料\05_所需服务器\server 路径下的服务器
import React, { useRef } from "react";
import axios from "axios";
import PubSub from "pubsub-js";

export default function Search(props) {
  const input = useRef();
  const handleSearch = () => {
    //初次搜索,开启等待
    // props.updataAppState({ isFirst: false, isLoading: true });
    PubSub.publish("state", { isFirst: false, isLoading: true });
    //axios请求数据
    const { value: searchValue } = input.current;
    //注意打开react全家桶的05_所需服务器的server
    axios
      .get(`http://localhost:3000/api/search/users?q=${searchValue}`)
      .then((res) => {
        // props.updataAppState({ isLoading: false, user: res.data.items });
        PubSub.publish("state", { isLoading: false, user: res.data.items });
      })
      .catch((err) => {
        // props.updataAppState({ isLoading: false, err: err.message });
        PubSub.publish("state", { isLoading: false, err: err.message });
      });
  };
  return (
    <div>
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索用户头像</h3>
        <div>
          <input ref={input} type="text" placeholder="输入搜索关键字" />
          &nbsp;
          <button onClick={handleSearch}>搜索</button>
        </div>
      </section>
    </div>
  );
}
